import { Tooltip } from 'antd';
import MyIcon from '@/components/MyIcon';
import pageStyles from '@/common/pageLayout.less';
import { getColorTextLoadMap, tooltipLength } from '@/utils';

/** 详情字典渲染返回 */
export const DictionarySpan = (res) => {
  if (!res) return <span>--</span>;
  const { colorText, color } = getColorTextLoadMap(res);
  return <span style={{ color }}>{colorText ?? '--'}</span>;
};

/** 详情字典渲染返回 - 多个 */
export const DictionarySpans = (res) => {
  if (!res) return <span>--</span>;
  const items = res?.split(',');
  const names = items?.map((item) => item?.split('||')[0]);
  return <span>{names.join('/')}</span>;
};

export const ColumnsRenderFun = ({ text, isTooltip = false, textStyle = {}, event = undefined, record = {}, wordNum = 100 }: Record<string, any>) => {
  return (
    <>
      <Tooltip title={isTooltip ? tooltipLength(text, wordNum) : undefined}>
        <span className={pageStyles['over-flow-hidden']} onClick={event ? () => event(record) : undefined} style={textStyle}>
          {text == null || text == undefined || text == '' ? '--' : text}
        </span>
      </Tooltip>
    </>
  );
};

export const DictionaryRenderFun = ({
  text,
  isTooltip = false,
  textStyle = {},
  event = undefined,
  record = {},
  wordNum = 100,
  isState = false,
}: Record<string, any>) => {
  const { colorText, color } = getColorTextLoadMap(text);
  return (
    <>
      <Tooltip title={isTooltip ? tooltipLength(colorText, wordNum) : undefined}>
        <span
          className={pageStyles['over-flow-hidden']}
          onClick={event ? () => event(record) : undefined}
          style={{ color: isState ? null : color, ...textStyle }}
        >
          {isState && text ? (
            <>
              <MyIcon type="icon-dian" style={{ color }} />
              &nbsp;
            </>
          ) : (
            <></>
          )}
          {colorText == null || colorText == undefined || colorText == '' ? '--' : colorText}
        </span>
      </Tooltip>
    </>
  );
};

export const DictionaryRenderFuns = ({
  text,
  isTooltip = false,
  textStyle = {},
  event = undefined,
  record = {},
  wordNum = 50,
  isState = false,
}: Record<string, any>) => {
  const { color } = getColorTextLoadMap(text);
  const items = text?.split(',');
  const names = items?.map((item) => item?.split('||')?.[0]);
  return (
    <>
      <Tooltip title={isTooltip ? tooltipLength(names?.join('/'), wordNum) : undefined}>
        <span className={pageStyles['over-flow-hidden']} onClick={event ? () => event(record) : undefined} style={{ ...textStyle }}>
          {isState && text ? (
            <>
              <MyIcon type="icon-dian" style={{ color }} />
              &nbsp;
            </>
          ) : (
            <></>
          )}
          {names?.join('/')}
        </span>
      </Tooltip>
    </>
  );
};

/**
 * @renderOverflowText
 * @description 处理文字溢出
 * @param text 值
 * @param isShowTooltip 是否溢出隐藏并且加Tooltip
 * @returns
 */
export const renderOverflowText = (text: string | number | null, isShowTooltip = false) => {
  const index = ['1', '0'].indexOf(String(text) || '');
  const { colorText, color } = getColorTextLoadMap(String(text));
  const info = {
    word: colorText == 'undefined' || colorText == 'null' || !colorText ? '--' : colorText,
    color: color,
  };
  if (index != -1) {
    info.word = index == 1 ? '是' : '否';
    info.color = index == 1 ? '#409eff' : 'red';
  }
  if (isShowTooltip && info.word != '--') {
    return (
      <Tooltip title={info.word}>
        <span className={pageStyles['over-flow-hidden']} style={{ color: info.color }}>
          {info.word}
        </span>
      </Tooltip>
    );
  } else {
    return <span style={{ color: info.color }}>{info.word}</span>;
  }
};
